<!-- ModifyPasswordPopup.vue -->
<template>
  <uni-popup ref="popup" type="center" @close="onClose">
    <view class="modify-password-popup">
      <view class="title">修改密码</view>
      <view class="form-item">
        <label>原密码</label>
        <input type="password" placeholder="请输入原密码" v-model="oldPwd" />
      </view>
      <view class="form-item">
        <label>新密码</label>
        <input type="password" placeholder="请输入6-18位密码" v-model="newPwd" />
      </view>
      <view class="form-item">
        <label>二次确认</label>
        <input type="password" placeholder="请再输入一次密码" v-model="confirmPwd" />
      </view>
      <view class="btn-group">
        <button @click="cancel">取消</button>
        <button @click="save">保存</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      oldPwd: '',
      newPwd: '',
      confirmPwd: '',
		isLogoutLoading: false, // 退出登录加载状态

    }
  },
  methods: {
    // 供父组件调用的打开方法
    open() {
      this.$refs.popup.open();
    },
    cancel() {
      this.$refs.popup.close();
      this.resetForm();
    },
    save() {
      // 简单校验（可扩展接口请求）
      if (!this.oldPwd) {
        uni.showToast({ title: '请输入原密码', icon: 'none' });
        return;
      }
      if (this.newPwd.length < 6 || this.newPwd.length > 18) {
        uni.showToast({ title: '新密码需6-18位', icon: 'none' });
        return;
      }
      if (this.newPwd!== this.confirmPwd) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' });
        return;
      }
      uni.showToast({ title: '修改成功', icon: 'success' });
      this.cancel();
    },
    resetForm() {
      this.oldPwd = '';
      this.newPwd = '';
      this.confirmPwd = '';
    },
    onClose() {
      this.resetForm();
    }
  }
}
</script>

<style scoped>
.modify-password-popup {
  width: 600rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}
.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}
.form-item label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.form-item input {
  height: 60rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
}
.btn-group {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
}
.btn-group button {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 8rpx;
}
.btn-group button:first-child {
  background: #f5f5f5;
  color: #333;
}
.btn-group button:last-child {
  background: #727cf5;
  color: #fff;
}
</style>